<template>
  <view class="detail-page">
    <u-navbar 
      placeholder
      leftIcon="arrow-left"
      :title="$t('pages_user_event_detail_detail_msg_510d6875')"
      @leftClick="goBack" 
    />
    
    <view v-if="eventData" class="content">
      <!-- 赛事基本信息 -->
      <view class="info-card">
        <view class="card-header">
          <text class="card-title">赛事信息</text>
        </view>
        <view class="card-content">
          <view class="info-item">
            <text class="info-label">赛事名称</text>
            <text class="info-value">{{ eventData.name || '暂无' }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">报名时间</text>
            <text class="info-value">{{ formatTime(eventData.createDate) }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">开始时间</text>
            <text class="info-value">{{ formatTime(eventData.beginTime) }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">报名ID</text>
            <text class="info-value order-id">{{ eventData.id }}</text>
          </view>
        </view>
      </view>

      <!-- 状态信息 -->
      <view class="info-card">
        <view class="card-header">
          <text class="card-title">状态信息</text>
        </view>
        <view class="card-content">
          <view class="status-row">
            <view class="status-item">
              <text class="status-label">报名状态</text>
              <view class="status-badge" :class="eventData.status === 0 ? 'status-pending' : eventData.status === 1 ? 'status-confirmed' : eventData.status === 2 ? 'status-processing' : eventData.status === 3 ? 'status-completed' : eventData.status === 4 ? 'status-cancelled' : eventData.status === 5 ? 'status-refunded' : 'status-unknown'">
                  {{ eventData.status === 0 ? this.$t('pages_user_event_detail_detail_msg_047109de') : eventData.status === 1 ? this.$t('pages_user_event_detail_detail_msg_4113e726') : eventData.status === 2 ? this.$t('pages_event_list_list_msg_fb852fc6') : eventData.status === 3 ? this.$t('pages_event_grades_grades_msg_fad5222c') : eventData.status === 4 ? this.$t('pages_user_event_detail_detail_msg_2111ccbb') : eventData.status === 5 ? this.$t('pages_user_event_detail_detail_msg_e85018b9') : this.$t('pages_album_album_msg_903b25f6') }}
                </view>
            </view>
            <view class="status-item">
              <text class="status-label">支付状态</text>
              <view class="status-badge" :class="eventData.payStatus === 0 ? 'pay-unpaid' : eventData.payStatus === 1 ? 'pay-paid' : eventData.payStatus === 2 ? 'pay-failed' : eventData.payStatus === 3 ? 'pay-refunded' : 'pay-unknown'">
                  {{ eventData.payStatus === 0 ? this.$t('pages_user_event_detail_detail_msg_608afd77') : eventData.payStatus === 1 ? this.$t('pages_event_grades_grades_msg_8d02a562') : eventData.payStatus === 2 ? this.$t('pages_user_event_detail_detail_msg_4548cc1f') : eventData.payStatus === 3 ? this.$t('pages_user_event_detail_detail_msg_e85018b9') : this.$t('pages_album_album_msg_903b25f6') }}
                </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 费用信息 -->
      <view class="info-card">
        <view class="card-header">
          <text class="card-title">费用信息</text>
        </view>
        <view class="card-content">
          <view class="price-row">
            <text class="price-label">报名费用</text>
            <text class="price-value">¥{{ eventData.money || 0 }}</text>
          </view>
        </view>
      </view>

      <!-- 操作按钮 -->
      <view class="action-buttons" v-if="canCancelRegistration(eventData)">
        <button 
          class="cancel-btn" 
          @click="cancelRegistration"
          :disabled="cancelling"
        >
          {{ cancelling ? '取消中...' : '取消报名' }}
        </button>
      </view>
    </view>

    <!-- 加载状态 -->
    <view v-else class="loading-container">
      <u-loading-icon mode="circle" size="40"/>
      <text class="loading-text">加载中...</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'EventDetail',
  data() {
    return {
      eventData: null,
      cancelling: false
    }
  },
  onLoad(options) {
    if (options.data) {
      try {
        this.eventData = JSON.parse(decodeURIComponent(options.data));
      } catch (error) {
        console.error('解析数据失败:', error);
        uni.showToast({
          title: this.$t('pages_user_event_detail_detail_msg_9a843572'),
          icon: 'none'
        });
      }
    }
  },
  methods: {
    // 返回
    goBack() {
      uni.navigateBack();
    },

    // 格式化时间
    formatTime(time) {
      if (!time) return this.$t('pages_user_event_detail_detail_none');
      const date = new Date(time);
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
    },

    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        0: this.$t('pages_user_event_detail_detail_msg_047109de'),
        1: this.$t('pages_user_event_detail_detail_msg_4113e726'), 
        2: this.$t('pages_event_list_list_msg_fb852fc6'),
        3: this.$t('pages_event_grades_grades_msg_fad5222c'),
        4: this.$t('pages_user_event_detail_detail_msg_2111ccbb'),
        5: this.$t('pages_user_event_detail_detail_msg_e85018b9')
      };
      return statusMap[status] || this.$t('pages_album_album_msg_903b25f6');
    },

    // 获取状态样式类
    getStatusClass(status) {
      const statusClassMap = {
        0: 'status-pending',
        1: 'status-confirmed',
        2: 'status-processing', 
        3: 'status-completed',
        4: 'status-cancelled',
        5: 'status-refunded'
      };
      return statusClassMap[status] || 'status-unknown';
    },

    // 获取支付状态文本
    getPayStatusText(payStatus) {
      const payStatusMap = {
        0: this.$t('pages_user_event_detail_detail_msg_608afd77'),
        1: this.$t('pages_event_grades_grades_msg_8d02a562'),
        2: this.$t('pages_user_event_detail_detail_msg_4548cc1f'),
        3: this.$t('pages_user_event_detail_detail_msg_e85018b9')
      };
      return payStatusMap[payStatus] || this.$t('pages_album_album_msg_903b25f6');
    },

    // 获取支付状态样式类
    getPayStatusClass(payStatus) {
      const payStatusClassMap = {
        0: 'pay-unpaid',
        1: 'pay-paid',
        2: 'pay-failed',
        3: 'pay-refunded'
      };
      return payStatusClassMap[payStatus] || 'pay-unknown';
    },

    // 判断是否可以取消报名
    canCancelRegistration(item) {
      // 只有待处理(0)和已确认(1)状态的报名可以取消
      // 且支付状态不是已退款(3)
      return (item.status === 0 || item.status === 1) && item.payStatus !== 3;
    },

    // 取消报名
    async cancelRegistration() {
      uni.showModal({
        title: this.$t('pages_user_event_detail_detail_msg_e8606af7'),
        content: `确定要取消报名"${this.eventData.name}"吗？`,
        success: async (res) => {
          if (res.confirm) {
            try {
              this.cancelling = true;
              
              // 调用取消报名接口
              await this.$api.event.cancel({ orderId: this.eventData.id });
              
              uni.showToast({
                title: this.$t('pages_user_event_detail_detail_msg_3cbf24cc'),
                icon: 'success'
              });

              // 更新状态
              this.eventData.status = 4; // 已取消
              
            } catch (error) {
              console.error('取消报名失败:', error);
              uni.showToast({
                title: '取消失败，请重试',
                icon: 'none'
              });
            } finally {
              this.cancelling = false;
            }
          }
        }
      });
    }
  }
}
</script>

<style scoped lang="scss">
.detail-page {
  background: #f8f8f8;
  min-height: 100vh;
}

.content {
  padding: 24rpx;
}

.info-card {
  background: #fff;
  border-radius: 16rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.card-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 24rpx 32rpx;
  
  .card-title {
    color: #fff;
    font-size: 32rpx;
    font-weight: 600;
  }
}

.card-content {
  padding: 32rpx;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1px solid #f0f0f0;
  
  &:last-child {
    border-bottom: none;
  }
  
  .info-label {
    font-size: 28rpx;
    color: #666;
    font-weight: 500;
  }
  
  .info-value {
    font-size: 28rpx;
    color: #333;
    font-weight: 600;
    text-align: right;
    flex: 1;
    margin-left: 20rpx;
    
    &.order-id {
      font-family: 'Courier New', monospace;
      color: #007aff;
    }
  }
}

.status-row {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.status-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  .status-label {
    font-size: 28rpx;
    color: #666;
    font-weight: 500;
  }
  
  .status-badge {
    padding: 12rpx 24rpx;
    border-radius: 20rpx;
    font-size: 24rpx;
    font-weight: 600;
    
    &.status-pending {
      background: #fff3e0;
      color: #f57c00;
    }
    
    &.status-confirmed {
      background: #e3f2fd;
      color: #1976d2;
    }
    
    &.status-processing {
      background: #f3e5f5;
      color: #7b1fa2;
    }
    
    &.status-completed {
      background: #e8f5e8;
      color: #388e3c;
    }
    
    &.status-cancelled,
    &.status-refunded {
      background: #ffebee;
      color: #d32f2f;
    }
    
    &.status-unknown {
      background: #f5f5f5;
      color: #666;
    }
    
    &.pay-unpaid {
      background: #fff3e0;
      color: #f57c00;
    }
    
    &.pay-paid {
      background: #e8f5e8;
      color: #388e3c;
    }
    
    &.pay-failed {
      background: #ffebee;
      color: #d32f2f;
    }
    
    &.pay-refunded {
      background: #f3e5f5;
      color: #7b1fa2;
    }
    
    &.pay-unknown {
      background: #f5f5f5;
      color: #666;
    }
  }
}

.price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  
  .price-label {
    font-size: 28rpx;
    color: #666;
    font-weight: 500;
  }
  
  .price-value {
    font-size: 36rpx;
    color: #ff6b35;
    font-weight: 700;
  }
}

.action-buttons {
  padding: 24rpx 0;
  
  .cancel-btn {
    width: 100%;
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
    color: white;
    border: none;
    border-radius: 12rpx;
    padding: 16rpx;
    font-size: 32rpx;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
    transition: all 0.3s ease;
    
    &:active {
      transform: translateY(2rpx);
      box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
    }
    
    &[disabled] {
      background: #ccc;
      box-shadow: none;
      transform: none;
    }
  }
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 40rpx;
  
  .loading-text {
    margin-top: 24rpx;
    font-size: 28rpx;
    color: #666;
  }
}
</style>